import { useEffect, useRef, useState } from 'react'
import Child from './Child'

function App() {
  console.log('App')
  /* 
  useState: 接收一个初始状态值, 返回包含内存存储的状态数据和更新内部状态数据的函数的数组
  setCount的二种调用方式:
    setCount(newValue)
    setCount(count => 根据count计算一个新值 )
  */
  const [count, setCount] = useState(1)
  const [msg, setMsg] = useState('abc')
  /* 
  useEffect: 用来模拟类组件的生命周期勾子    didMount/didUpdate
    useEffect(() => {}, []) // didMount
    useEffect(() => {}, [count]) // didMount + count更新的didUpdate
    useEffect(() => {}) // didMount + didUpdate
  */
  useEffect(() => {
    console.log('effect回调')
    // 模拟异步请求后更新数据
    setTimeout(() => {
      const newCount = 4
      setCount(newCount)
    }, 2000);

    setTimeout(() => {
      setMsg('cba')
    }, 3000);
  }, [])

  useEffect(() => {
    console.log('effect回调222')
  }, [count])
  useEffect(() => {
    console.log('effect回调333')
  })

  /* 
  useRef:  用来标识得到内部的某个标签对象
    标签对象保存ref对象的current属性上
  */
  const inputRef = useRef()

  return (
    <>
      <p>msg: {msg}</p>
      <p>count: {count}</p>
      <button onClick={() => setCount(count => count + 2)}>增加</button>
      <br/>
      <input type="text" ref={inputRef}/>
      <button onClick={() => alert(inputRef.current.value)}>提示输入</button>

      <hr/>
      <Child count={count} setCount={setCount}></Child>
    </>
  )
}

export default App
